<template>
  <div class="charts-container">
    <!-- 第一行：折线图和柱状图 -->
    <div class="row">
      <div ref="chart1" class="chart"></div>
      <div ref="chart4" class="chart"></div>
    </div>
    <!-- 第二行：饼图和饼图 -->
    <div class="row">
      <div ref="chart3" class="chart"></div>
      <div ref="chart2" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EChartsScreen',
  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
  },
  methods: {
    initChart1() {
      /** 初始化第一个图表（折线图） */
      const chart = echarts.init(this.$refs.chart1);
      chart.setOption({
        title: {
          text: '销售额趋势图', // 图表标题
          left: 'center', // 标题居中显示
        },
        legend: {
          data: ['宫保鸡丁', '麻婆豆腐', '水煮鱼', '白切鸡', '蜜汁叉烧', '东坡肉', '龙井虾仁', '盱眙小龙虾', '剁椒鱼头', '农家小炒肉', '蟹黄小笼包', '锅贴'],
          top: 10,
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: '日期', // x 轴名称
          nameLocation: 'center', // x 轴名称居中
          nameGap: 25, // 调整名称与轴线的距离
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            margin: 20, // 调整 X 轴标签与轴线的距离
          },
        },
        yAxis: {
          type: 'value',
          name: '销售额 (元)',
          nameLocation: 'center', // y 轴名称居中
          nameGap: 40, // 调整名称与轴线的距离
          splitLine: { // 显示 y 轴网格线
            show: true,
            lineStyle: {
              type: 'solid', // 实线样式
              color: '#cccccc', // 网格线颜色
            },
          },
          min: 0, // 设置 Y 轴从 0 开始
        },
        series: [
          {
            name: '宫保鸡丁',
            type: 'line',
            smooth: true,
            data: [10, 22, 64, 69, 111, 86, 70], // 宫保鸡丁的销售数据
            itemStyle: {
              color: '#F56C6C',
            },
          },
          {
            name: '麻婆豆腐',
            type: 'line',
            smooth: true,
            data: [18, 40, 110, 150, 180, 220, 250], // 麻婆豆腐的销售数据
            itemStyle: {
              color: '#67C23A',
            },
          },
          {
            name: '水煮鱼',
            type: 'line',
            smooth: true,
            data: [15, 70, 160, 180, 190, 210, 220], // 水煮鱼的销售数据
            itemStyle: {
              color: '#FF9E0D',
            },
          },
          {
            name: '白切鸡',
            type: 'line',
            smooth: true,
            data: [50, 130, 140, 160, 200, 210, 220], // 白切鸡的销售数据
            itemStyle: {
              color: '#FF6A00',
            },
          },
          {
            name: '蜜汁叉烧',
            type: 'line',
            smooth: true,
            data: [50, 51, 80, 150, 156, 180, 200], // 蜜汁叉烧的销售数据
            itemStyle: {
              color: '#C20000',
            },
          },
          {
            name: '东坡肉',
            type: 'line',
            smooth: true,
            data: [20, 40, 60, 60, 110, 180, 221], // 东坡肉的销售数据
            itemStyle: {
              color: '#409EFF',
            },
          },
          {
            name: '龙井虾仁',
            type: 'line',
            smooth: true,
            data: [80, 90, 100, 110, 120, 130, 150], // 龙井虾仁的销售数据
            itemStyle: {
              color: 'blue',
            },
          },
          {
            name: '盱眙小龙虾',
            type: 'line',
            smooth: true,
            data: [45, 50, 55, 60, 85, 110, 95], // 盱眙小龙虾的销售数据
            itemStyle: {
              color: 'black',
            },
          },
          {
            name: '剁椒鱼头',
            type: 'line',
            smooth: true,
            data: [65, 70, 75, 80, 85, 90, 120], // 剁椒鱼头的销售数据
            itemStyle: {
              color: 'purple',
            },
          },
          {
            name: '农家小炒肉',
            type: 'line',
            smooth: true,
            data: [90, 95, 100, 105, 100, 95, 110], // 农家小炒肉的销售数据
            itemStyle: {
              color: 'green',
            },
          },
          {
            name: '蟹黄小笼包',
            type: 'line',
            smooth: true,
            data: [50, 65, 70, 75, 85, 90, 100], // 蟹黄小笼包的销售数据
            itemStyle: {
              color: 'red',
            },
          },
          {
            name: '锅贴',
            type: 'line',
            smooth: true,
            data: [110, 115, 120, 125, 130, 140, 150], // 锅贴的销售数据
            itemStyle: {
              color: '#FFC107',
            },
          }
        ],
      });
    },

    /** 初始化第二个图表柱状图 */
    initChart2() {
  const chart = echarts.init(this.$refs.chart2); // 修正引用的图表容器
  chart.setOption({
    title: {
      text: '酒水销量排行', // 图表标题
      left: 'center', // 标题居中显示
    },
    legend: {
      data: ['茅台飞天', '五粮液', '拉菲古堡', '白酒', '青岛啤酒', '百威啤酒', '可口可乐', '雪碧'],
      top: 30,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: true, // 对于柱状图，通常设为 true
      name: '日期', // x 轴名称
      nameLocation: 'center', // x 轴名称居中
      nameGap: 25, // 调整名称与轴线的距离
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        margin: 20, // 调整 X 轴标签与轴线的距离
      },
    },
    yAxis: {
      type: 'value',
      name: '销量',
      nameLocation: 'center', // y 轴名称居中
      nameGap: 45, // 调整名称与轴线的距离
      splitLine: { // 显示 y 轴网格线
        show: true,
        lineStyle: {
          type: 'solid', // 实线样式
          color: '#cccccc', // 网格线颜色
        },
      },
      min: 0, // 设置 Y 轴从 0 开始
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [120, 150, 200, 180, 100, 80, 70],
        label: {
          show: true, // 显示标签
          position: 'top', // 标签显示位置在柱子上方
        },
        itemStyle: {
          color: '#409EFF',
        },
      },
    ],
  });
},


    /** 初始化第三个图表饼图 */
    initChart3() {
      const chart = echarts.init(this.$refs.chart3); // 修正引用的图表容器
      chart.setOption({
        title: {
          text: '菜品占比',
          left: 'center',
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['40%', '70%'], // 环形饼图
            data: [
              { value: 120, name: '宫保鸡丁' },
              { value: 150, name: '麻婆豆腐' },
              { value: 200, name: '水煮鱼' },
              { value: 180, name: '白切鸡' },
              { value: 100, name: '蜜汁叉烧' },
              { value: 80, name: '东坡肉' },
              { value: 70, name: '龙井虾仁' },
              { value: 60, name: '盱眙小龙虾' },
              { value: 50, name: '剁椒鱼头' },
              { value: 40, name: '农家小炒肉' },
              { value: 30, name: '蟹黄小笼包' },
              { value: 20, name: '锅贴' },
            ],
            label: {
              formatter: '{b}: {d}%', // 显示百分比
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });
    },

    /** 初始化第四个图表饼图 */
    initChart4() {
      const chart = echarts.init(this.$refs.chart4); // 修正引用的图表容器
      chart.setOption({
        title: {
          text: '酒水占比',
          left: 'center',
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['40%', '70%'], // 环形饼图
            data: [
              { value: 120, name: '茅台飞天' },
              { value: 150, name: '五粮液' },
              { value: 200, name: '拉菲古堡' },
              { value: 180, name: '白酒' },
              { value: 100, name: '青岛啤酒' },
              { value: 80, name: '百威啤酒' },
              { value: 70, name: '可口可乐' },
              { value: 60, name: '雪碧' },
            ],
            label: {
              formatter: '{b}: {d}%', // 显示百分比
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.charts-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 行间距 */
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 图表间距 */
}

.chart {
  width: 50%;
  height: 465px;
}
</style>
